<template>
  <div class="warehouse-rollup-container">
    <!-- 时间筛选 -->
    <el-tabs v-model="activeTimeTab" style="margin-bottom: 20px;">
      <el-tab-pane label="今日" name="today"></el-tab-pane>
      <el-tab-pane label="昨日" name="yesterday"></el-tab-pane>
      <el-tab-pane label="本周" name="week"></el-tab-pane>
      <el-tab-pane label="上周" name="lastWeek"></el-tab-pane>
      <el-tab-pane label="本月" name="month"></el-tab-pane>
      <el-tab-pane label="上月" name="lastMonth"></el-tab-pane>
    </el-tabs>

    <!-- 图表部分 -->
    <div class="chart-container">
      <div class="chart-header">
        <span class="chart-title">数量</span>
        <div class="chart-legend">
        </div>
      </div>
      <div ref="chartRef" style="width: 100%; height: 400px;"></div>
    </div>

    <!-- 导出按钮 -->
    <div class="action-buttons">
      <el-button size="small" class="export-btn" @click="exportData">导出</el-button>
    </div>

    <!-- 表格部分 -->
    <el-table :data="tableData" stripe style="width: 100%" show-summary :summary-method="getSummaries">
      <!-- 固定列 -->
      <el-table-column type="selection" width="55" fixed="left"></el-table-column>
      <el-table-column prop="warehouseName" label="仓库名称" fixed="left"></el-table-column>
      <el-table-column prop="productType" label="货品种类"  fixed="left"></el-table-column>
      <el-table-column prop="totalAmount" label="总金额"  fixed="left">
        <template #default="scope">
          {{ Number(scope.row.totalAmount).toFixed(2) }}
        </template>
      </el-table-column>

      <!-- 入库 -->
      <el-table-column label="入库">
        <el-table-column prop="inboundCount" label="入库次数" ></el-table-column>
        <el-table-column prop="inboundQuantity" label="入库数量" ></el-table-column>
        <el-table-column prop="inboundAmount" label="入库金额" >
          <template #default="scope">
            {{ Number(scope.row.inboundAmount || 0).toFixed(2) }}
          </template>
        </el-table-column>
      </el-table-column>

      <!-- 出库 -->
      <el-table-column label="出库">
        <el-table-column prop="outboundCount" label="出库次数" ></el-table-column>
        <el-table-column prop="outboundQuantity" label="出库数量" ></el-table-column>
        <el-table-column prop="outboundAmount" label="出库金额" >
          <template #default="scope">
            {{ Number(scope.row.outboundAmount || 0).toFixed(2) }}
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    
    <!-- 分页组件 -->
    <el-pagination 
      :page-size="10" 
      :pager-count="11" 
      layout="prev, pager, next,jumper" 
      :total="pagination.total"
      v-on:current-change="handlePageChange" 
      style="text-align: right; margin-top: 20px; margin-right: 20px;">
    </el-pagination>

  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick, computed, watch } from 'vue';
import * as echarts from 'echarts';
import http from '../auth/index';
import { ElMessage } from 'element-plus';

const activeTimeTab = ref('today');
const chart = ref(null);
const chartRef = ref(null);
const tableData = ref([]);
const loading = ref(false);

// 分页数据
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

// 计算总计
const totalInboundQuantity = computed(() => {
  return tableData.value.reduce((sum, item) => sum + item.inboundQuantity, 0);
});

const totalOutboundQuantity = computed(() => {
  return tableData.value.reduce((sum, item) => sum + item.outboundQuantity, 0);
});

// 获取数据
const fetchData = async () => {
  loading.value = true;
  try {
    console.log('WarehouseRollup - 请求参数:', { 
      timeType: activeTimeTab.value,
      pageIndex: pagination.currentPage,
      pageSize: pagination.pageSize
    });
    
    const response = await http.get('/Stock/GetWarehouseRollup', {
      params: {
        timeType: activeTimeTab.value,
        pageIndex: pagination.currentPage,
        pageSize: pagination.pageSize
      }
    });


    if (response.data && response.data.success) {
      tableData.value = response.data.data || [];
      pagination.total = response.data.total || 0;
      
      
      nextTick(() => {
        initChart();
      });
    } else {
      ElMessage.warning('没有相关数据');
      tableData.value = [];
      pagination.total = 0;
    }
  } catch (error) {
    console.error('WarehouseRollup - 获取数据失败:', error);
    tableData.value = [];
    pagination.total = 0;
  } finally {
    loading.value = false;
  }
};

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return;
  
  if (chart.value) {
    chart.value.dispose();
  }
  
  chart.value = echarts.init(chartRef.value);
  const option = {
    tooltip: { trigger: 'axis' },
    legend: { data: ['入库数量', '出库数量'] },
    xAxis: {
      type: 'category',
      data: tableData.value.map(item => item.warehouseName)
    },
    yAxis: { type: 'value' },
    series: [
      {
        name: '入库数量',
        type: 'bar',
        itemStyle: { color: '#52c41a' },
        data: tableData.value.map(item => item.inboundQuantity)
      },
      {
        name: '出库数量',
        type: 'bar',
        itemStyle: { color: '#409eff' },
        data: tableData.value.map(item => item.outboundQuantity)
      }
    ]
  };
  chart.value.setOption(option);
};

// 导出数据
const exportData = () => {
  if (tableData.value.length === 0) {
    ElMessage.warning('没有数据可导出');
    return;
  }
  ElMessage.success('导出功能待实现');
};

// 分页处理
const handleSizeChange = (size) => {
  pagination.pageSize = size;
  pagination.currentPage = 1;
  fetchData();
};

const handleCurrentChange = (page) => {
  pagination.currentPage = page;
  fetchData();
};

// 监听时间标签变化
watch(activeTimeTab, () => {
  pagination.currentPage = 1; // 重置到第一页
  fetchData();
});

// 初始化
onMounted(() => {
  fetchData();
});
</script>

<style scoped>
.warehouse-rollup-container {
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow-x: auto; /* 添加横向滚动 */
}
 
.chart-container {
  width: 100%;
  margin-bottom: 20px;
}
 
.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
 
.chart-title {
  font-size: 16px;
  font-weight: bold;
}
 
.chart-legend {
  display: flex;
  gap: 15px;
}
 
.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #333;
  font-size: 14px;
}
/* 终极解决方案：全面修复固定列穿透问题 */
:deep(.el-table) {
  position: relative;
}
 
/* 1. 修复表头固定问题 */
:deep(.el-table__header-wrapper) {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
}
 
/* 2. 修复固定列穿透的核心方案 */
:deep(.el-table__fixed, .el-table__fixed-right) {
  height: auto !important;
  bottom: 0;
  z-index: 4 !important;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.12);
}
 
:deep(.el-table__fixed-body-wrapper) {
  overflow: hidden !important;
  position: relative;
}

.summary-row {
  background-color: #f5f7fa;
  font-weight: bold;
}

/* 合计行样式 - 更具体的选择器 */
:deep(.el-table__footer) {
  color: #f56c6c !important;
  font-weight: bold !important;
}

:deep(.el-table__footer .el-table__cell) {
  color: #f56c6c !important;
  font-weight: bold !important;
  background-color: #f5f7fa !important;
}

:deep(.el-table__footer td) {
  color: #f56c6c !important;
  font-weight: bold !important;
}

/* 确保固定列的合计行也是红色 */
:deep(.el-table__fixed .el-table__footer .el-table__cell) {
  color: #f56c6c !important;
  font-weight: bold !important;
  background-color: #f5f7fa !important;
}

/* 3. 确保固定列背景色 */
:deep(.el-table__fixed .el-table__cell) {
  background-color: #fff;
}
 
/* 4. 修复滚动时的层级问题 */
:deep(.el-table__body-wrapper) {
  z-index: 2;
}
 
/* 5. 为固定列添加更高的z-index和背景色 */
:deep(.el-table__header th:nth-child(-n+5), 
      .el-table__body td:nth-child(-n+5)) {
  position: sticky;
  left: 0;
  z-index: 5; /* 最高层级 */
  background: #fff;
  box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.1);
}
 
/* 6. 确保表格容器有正确的定位 */
:deep(.el-table__inner-wrapper) {
  position: relative;
  overflow: auto;
}
 
/* 导出按钮左对齐 */
.action-buttons {
  text-align: left;
  margin-bottom: 20px;
}
 
/* 主表列居中 */
:deep(.el-table .cell) {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 分页组件样式 */
:deep(.el-pagination) {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  margin-right: 0;
  flex-wrap: wrap; /* 允许换行 */
}
</style>
